body {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/*  */
.header {
    width: 100%;
    height: 0.92rem;
    display: flex;
    justify-content: center;
    animation: loadFromTop 1s linear;
    -webkit-animation: loadFromTop 1s linear;
    animation-fill-mode: backwards;
}

@keyframes loadFromTop {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.header-content {
    width: 13.42rem;
    height: 0.8rem;
    background: url(../img/header.png);
    background-size: cover;
    background-repeat: no-repeat;
    font-size: 0.12rem;
    color: #fff;
    margin-top: 0.12rem;
}

/* 头部上方样式 */
.header-content-top {
    height: 0.46rem;
    width: 100%;
    display: flex;
    justify-content: space-between;
    cursor: default;
    white-space: nowrap;
}

.header-content-top-left {
    width: 4.2rem;
    height: 100%;
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.header-content-top-left>img:nth-child(1) {
    width: 0.3rem;
    height: 0.32rem;
    margin: 0 0.1rem 0 0.3rem;
}

.header-content-top-left>img:nth-child(6) {
    width: 0.12rem;
    height: 0.16rem;
    margin: 0 0.1rem 0 0.2rem;
}

.header-content-top-right {
    width: 4rem;
    height: 100%;
    margin-left: 0.1rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: relative;
}

.header-content-top-right>img {
    width: 0.3rem;
    height: 0.32rem;
}

#exercise {
    width: 0.28rem;
    height: 0.31rem;
    position: absolute;
    cursor: pointer;
    right: 0.2rem;
}

#week {
    margin-right: 0.1rem;
}

#date {
    margin: 0 0.05rem 0 0.1rem;
}

#temperature {
    margin: 0 0.12rem 0 0.12rem;
}

#weather {
    margin-left: 0.16rem;
}

.username {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
    margin: 0 0.2rem;
}

.username>img {
    width: 0.28rem;
    height: 0.28rem;
    margin-right: 0.05rem;
}

.logout {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    width: 0.4rem;
    margin-right: 0.2rem;
    transition: all 0.3s;
}

.logout:hover {
    color: #36bdd0;
}

.header-content-top .line {
    width: 0.01rem;
    height: 0.16rem;
    background: #2839AD;
}


.main {
    position: relative;
    margin-top: 0.1rem;
    width: 100%;
    min-height: 6rem;
    display: flex;
}

.main-title {
    width: 100%;
    height: 0.5rem;
    display: flex;
    align-items: center;
    padding-left: 0.2rem;
    color: #7BB4F1;
    border-bottom: 0.02rem solid #0c3668;
}

.main-title>img {
    width: 0.28rem;
    height: 0.31rem;
    margin-right: 0.08rem;
}

/* 主题内容样式_左侧 */
.main-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 23%;
    height: 100%;
    margin-left: 1%;
    z-index: 9;
    transform-style: preserve-3d;
    -webkit-perspective: 800px;
    perspective: 800px;
    position: relative;
}


.left-overview {
    background: url(../img/home/bg3.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 3.1rem;
    height: 3.6rem;
    position: relative;
    transform: rotateY(7deg);
    transform-origin: 0 0;
    animation: loadLeftRotateY 1.5s linear;
    -webkit-animation: loadLeftRotateY 1.5s linear;
    animation-fill-mode: backwards;
}

@keyframes loadLeftRotateY {
    0% {
        transform: translateX(-100%) rotateY(0deg);
        opacity: 0;
    }

    75% {
        transform: translateX(0%) rotateY(0deg);
        opacity: 1;
    }

    100% {
        transform: rotateY(7deg);
    }
}

.left-overview-top {
    width: calc(100% - 0.4rem);
    margin-left: 0.2rem;
    height: 1.1rem;
    display: flex;
}

.left-overview-top>div {
    width: 33.3%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.left-overview-top>div img {
    width: 0.7rem;
    height: 0.7rem;
}

.left-overview-top>div>div {
    position: absolute;
}

.left-overview-top>div>div:nth-last-child(2) {
    bottom: -0.1rem;
}

.left-overview-top>div>div:nth-last-child(1) {
    font-size: 0.2rem;
}

.left-overview-top>div:nth-child(1)>div {
    color: #17E0BC;
}

.left-overview-top>div:nth-child(2)>div {
    color: #FD0202;
}

.left-overview-top>div:nth-child(3)>div {
    color: #13559F;
}

.left-overview-bottom {
    border-top: 0.01rem dashed #13559F;
    margin-top: 0.2rem;
    position: relative;
}

.left-overview-bottom>img {
    width: 3.1rem;
    height: 1.9rem;
    position: absolute;
    top: -0.15rem;
    left: -0.1rem
}

.left-overview-bottom-item {
    position: absolute;
    color: #fff;
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.left-overview-bottom-item>div:nth-child(1) {
    font-size: 0.1rem;
    margin-right: 0.05rem;
}

.left-overview-bottom-item>div:nth-child(2) {
    font-size: 0.18rem;
}

.left-overview-bottom-item:nth-last-child(3) {
    top: 0.7rem;
    left: 0.55rem;
}

.left-overview-bottom-item:nth-last-child(2) {
    top: 0.1rem;
    left: 1.25rem;
}

.left-overview-bottom-item:nth-last-child(1) {
    top: 0.5rem;
    left: 2.3rem;
}

.left-count {
    background: url(../img/home/bg5.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 3.1rem;
    height: 2.44rem;
    position: relative;
    margin-top: 0.13rem;
    transform: rotateY(7deg);
    transform-origin: 0 0;
    animation: loadLeftRotateY 1.5s linear;
    -webkit-animation: loadLeftRotateY 1.5s linear;
    animation-fill-mode: backwards;
}

.left-count-chart {
    width: 100%;
    height: 2rem;
}

/* 主题内容样式_中间 */
.main-middle {
    width: 50%;
    height: 100%;
    position: relative;
    margin: 0 1%;
    animation: loadFromMid 1s linear 1s;
    -webkit-animation: loadFromMid 1s linear 1s;
    animation-fill-mode: backwards;
}

@keyframes loadFromMid {
    0% {
        scale: 0.3;
        opacity: 0;
    }

    100% {
        scale: 1;
        opacity: 1;
    }
}

.middle-map {
    width: 100%;
    height: 4.13rem;
    position: relative;
}

.map-title {
    width: 100%;
    height: 0.4rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #7BB4F1;
    cursor: default;

}

.map-title-count {
    display: flex;
    margin-right: 0.15rem;
    z-index: 9;
}

.map-nav {
    width: 1.3rem;
    height: 0.24rem;
    border: 0.01rem solid #12DBF7;
    color: #12DBF7;
    text-align: center;
    line-height: 0.24rem;
    cursor: pointer;
    transition: all 0.3s;
}

.map-nav.selected {
    background: rgba(54, 149, 170, 0.2);
    color: #fff;
}

.map-nav:hover {
    text-shadow: 0 0 0.05rem #12DBF7;
}

.map-nav:nth-child(1) {
    border-top-left-radius: 0.02rem;
    border-bottom-left-radius: 0.02rem;

}

.map-nav:nth-child(2) {
    border-top-right-radius: 0.02rem;
    border-bottom-right-radius: 0.02rem;
    border-left: none;
}

.map-title img {
    width: 0.32rem;
    height: 0.32rem;
    margin-right: 0.04rem;
}

.map-body {
    position: relative;
    width: 100%;
    height: 4.93rem;
}

#map-body {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
}

#map-body>div:nth-child(1) {
    background: url(../img/home/map.png);
    background-size: cover;
    background-repeat: no-repeat;
    width: 7.86rem;
    height: 4.93rem;
    position: absolute;
    top: -0.55rem;
    transform: rotate(2deg);
}

.map-icon {
    position: absolute;
    width: 0.42rem;
    height: 0.46rem;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    transition: all 0.3s;
    cursor: pointer;
    transform: rotate(-2deg);
}

.map-icon.active {
    background-size: 0.4rem 0.4rem;
    background-image: url(../img/home/active.gif);
}


.map-msg {
    position: absolute;
    width: 2.22rem;
    height: 0.5rem;
    overflow: hidden;
    background-size: cover;
    background-image: url(../img/home/bg7.png);
    background-repeat: no-repeat;
    display: flex;
    animation: loadMapMsg 0.7s linear;
    -webkit-animation: loadMapMsg 0.7s linear;
    animation-fill-mode: backwards;
}

@keyframes loadMapMsg {
    0% {
        width: 0;
        opacity: 0;
    }

    100% {
        width: 2.22rem;
        opacity: 1;
    }
}

.map-msg>div {
    height: 100%;
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #ddd;
    text-shadow: 0 0 0.02rem rgba(255, 255, 255, 0.7);
    cursor: default;
}

.map-msg>div>div {
    width: 0.7rem;
    height: 50%;
    display: flex;
    align-items: center;
    text-indent: 0.03rem;
    white-space: nowrap;
}

.map-msg>div>div:nth-child(1) {
    border-bottom: 0.01rem solid #267AD799;
}

.map-s {
    background-size: 0.24rem 0.24rem;
    background-image: url(../img/home/map1.png);
}

.map-m {
    background-size: 0.26rem 0.17rem;
    background-image: url(../img/home/map2.png);
}

.map-l {
    background-size: 0.42rem 0.46rem;
    background-image: url(../img/home/map3.png);
}

.map-w {
    background-size: 0.26rem 0.25rem;
    background-image: url(../img/home/map4.png);
}

.street-320113009 {
    top: 1.3rem;
    left: 1.2rem;
}

.street-320113004 {
    top: 2.05rem;
    left: 1.6rem;
}

.street-320113003 {
    top: 2.45rem;
    left: 1.5rem;
}

.street-320113001 {
    top: 2.45rem;
    left: 2.1rem;
}

.street-320113005 {
    top: 1.8rem;
    left: 3.6rem;
}

.street-320113007 {
    top: 2.65rem;
    left: 2.6rem;
}

.street-320113002 {
    top: 3.55rem;
    left: 2.3rem;
}

.street-320113010 {
    top: 2.6rem;
    left: 3.95rem;
}

.street-320113006 {
    top: 0.8rem;
    left: 5.5rem;
}

.map-tool-all>img {
    width: 1.3rem;
    height: 1.47rem;
    position: absolute;
    bottom: 1.4rem;
    left: 5.3rem;
}

.middle-chart {
    display: flex;
    justify-content: center;
    margin-top: 0.13rem;
    align-items: center;
    position: relative;
}

.middle-chart>img {
    width: 13.5rem;
    height: 2.38rem;
    position: absolute;
}

.middle-chart-body {
    background: url(../img/home/bg2.png);
    background-size: cover;
    background-repeat: no-repeat;
    width: 6.61rem;
    height: 2.13rem;
    margin-top: 0.15rem;
}

#middle-chart-body {
    width: 6.6rem;
    height: 1.5rem;
    margin-top: 0.6rem;
}

/* 主题内容样式_右侧 */
.main-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 23%;
    height: 100%;
    margin-right: 1%;
    position: relative;
    z-index: 9;
    transform-style: preserve-3d;
    -webkit-perspective: 800px;
    perspective: 800px;
}


.right-overview {
    background: url(../img/home/bg4.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 3.1rem;
    height: 3.6rem;
    position: relative;
    transform: rotateY(-7deg);
    transform-origin: 100% 0;
    animation: loadRightRotateY 1.5s linear;
    -webkit-animation: loadRightRotateY 1.5s linear;
    animation-fill-mode: backwards;
}

.right-overview-body {
    position: relative;
}

.right-overview-body>img {
    width: 3rem;
    height: 3rem;
    position: absolute;
    left: 0.1rem;
    top: -0.1rem;
}

.right-overview-body>div {
    color: #12DBF7;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
}

.right-overview-body>div:nth-child(2) {
    top: 0.85rem;
    left: 0.55rem;
}

.right-overview-body>div:nth-child(3) {
    top: 0.7rem;
    left: 1.88rem;
}

.right-overview-body>div:nth-child(4) {
    top: 1.88rem;
    left: 2.38rem;
}

.right-overview-body>div:nth-child(5) {
    top: 2.75rem;
    left: 1.55rem;
}

.right-overview-body>div:nth-child(6) {
    top: 2.28rem;
    left: 0.25rem;
}

.right-overview-body>div span {
    font-size: 0.16rem;
    margin-left: 0.03rem;
}

.right-alert {
    background: url(../img/home/bg1.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 3.1rem;
    height: 2.44rem;
    position: relative;
    margin-top: 0.13rem;
    transform: rotateY(-7deg);
    transform-origin: 100% 0;
    animation: loadRightRotateY 1.5s linear;
    -webkit-animation: loadRightRotateY 1.5s linear;
    animation-fill-mode: backwards;
}

@keyframes loadRightRotateY {
    0% {
        transform: translateX(100%) rotateY(0deg);
        opacity: 0;
    }

    75% {
        transform: translateX(0) rotateY(0deg);
        opacity: 1;
    }

    100% {
        transform: rotateY(-7deg);
    }
}

.right-alert-list {
    width: 100%;
    height: 1.9rem;
    position: relative;
    overflow: hidden;
}

.right-alert-list-item {
    display: flex;
    height: 25%;
    width: 98%;
    color: #fff;
    align-items: center;
    border-bottom: 0.01rem solid #013475;
    margin-left: 1%;
    position: absolute;
    transition: top 0.8s;
    left: 0;
    animation: loadAlertList 1s linear;
    -webkit-animation: loadAlertList 1s linear;
    animation-fill-mode: backwards;
}

.list-fly {
    animation: listFly .5s linear;
    -webkit-animation: listFly .5s linear;
    animation-fill-mode: backwards;
}

@keyframes listFly {
    0% {
        transform: translateX(0%) translateY(0%);
        scale: 1;
        opacity: 1;
    }

    100% {
        transform: translateX(50%) translateY(-100%);
        scale: 0.5;
        opacity: 0;
    }
}

@keyframes loadAlertList {
    0% {
        transform: translateY(100%);
        opacity: 0;
    }

    100% {
        transform: translateY(0%);
        opacity: 1;
    }
}

.right-alert-list-item:nth-child(1) {
    top: 0;
}

.right-alert-list-item:nth-child(2) {
    top: 25%;
}

.right-alert-list-item:nth-child(3) {
    top: 50%;
}

.right-alert-list-item:nth-child(4) {
    top: 75%;
    border-bottom: none;
}

.right-alert-list-item:nth-child(5) {
    top: 100%;
}

.right-alert-list-item:nth-child(n+6) {
    top: 125%;
}


.right-alert-list-item:nth-last-child(1) {
    border: none;
}

.right-alert-list-item:nth-child(odd) {
    background: rgba(11, 25, 53, 0.5);
}

.right-alert-list-item img {
    width: 0.32rem;
    height: 0.32rem;
    margin: 0 0.13rem 0 0.24rem;
}

.right-alert-list-item-icon {
    background: url(../img/home/1.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 0.26rem;
    height: 0.23rem;
    margin: 0 0.13rem 0 0.24rem;
    display: flex;
    justify-content: center;
    font-size: 0.15rem;
    padding-top: 0.03rem;
    color: #99512e;
}